<template>
  <div>
    <a-input-number v-model="newValue"
                    :min="min"
                    :max="max"
                    :step="step"
                    :precision="precision"
                    :disabled="disabled"
                    :readOnly="readonly"
                    :autoFocus="autoFocus"
                    :formatter="formatter"
                    :parser="parser"
                    @change="handleChange"
                    style="width: 100%;"
                    :placeholder="placeholder" />
    <div v-if="showUppercase">{{ moneyToCapital(newValue) }}</div>
  </div>
</template>

<script>
import PropTypes from '@zh/common-utils/prop-types'

export default {
  name: 'ZMoney',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    }, // 当前值
    step: PropTypes.number.def(1), // 每次改变步数，可以为小数
    precision: PropTypes.number.def(2), // 数值精度
    min: PropTypes.number.def(Number.MIN_SAFE_INTEGER), // 最小值
    max: PropTypes.number.def(Number.MAX_SAFE_INTEGER), // 最大值
    disabled: PropTypes.bool.def(false), // 禁用
    readonly: PropTypes.bool.def(false),
    autoFocus: PropTypes.bool.def(false), // 自动获取焦点
    thousandth: PropTypes.bool.def(false).des('是否显示千分位'),
    prefix: PropTypes.string.def('').des('前缀'),
    suffix: PropTypes.string.def('').des('后缀'),
    showUppercase: PropTypes.bool.def(false).des('是否显示大写'),
    placeholder: PropTypes.string.def('金额')
  },
  data () {
    return {
      newValue: this.value
    }
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler (value) {
        this.newValue = value
      }
    }
  },
  methods: {
    // 处理前缀后缀千分位
    formatter (value) {
      if (value === null || value === '' || value === undefined) {
        return
      }
      let { thousandth, prefix = '', suffix = '' } = this
      let data = ''
      if (prefix) {
        data = `${prefix} ${value} ${suffix}`
      } else {
        data = `${value} ${suffix}`
      }
      if (thousandth) {
        return data.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      } else {
        return data
      }
    },
    parser (value) {
      if (value.startsWith('-')) {
        return `-${Number(value.replace(/[^\d|^.]/g, ''))}`
      }
      return Number(value.replace(/[^\d|^.]/g, '')) || null
    },
    moneyToCapital (n) {
      if (n === '') return ''
      if (n == 0) return '零'
      if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) {
        return ''
      }
      let unit = '千百拾亿千百拾万千百拾元角分',
        str = ''
      n += '00'
      let p = n.indexOf('.')
      if (p >= 0) {
        n = n.substring(0, p) + n.substr(p + 1, 2)
      }
      unit = unit.substr(unit.length - n.length)
      for (let i = 0; i < n.length; i++) {
        str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i)
      }
      return str
        .replace(/零(千|百|拾|角)/g, '零')
        .replace(/(零)+/g, '零')
        .replace(/零(万|亿|元)/g, '$1')
        .replace(/(亿)万|壹(拾)/g, '$1$2')
        .replace(/^元零?|零分/g, '')
        .replace(/元$/g, '元整')
    },
    handleChange () {
      this.$emit('change', this.newValue)
    }
  }
}
</script>